<template>
  <el-drawer v-model="mapDialogVisible" title="选择地理位置坐标" size="80%">
    <div class="map-container">
      <h5 class="text-red-400 text-center mb-2"
        >移动地图将定位标记到{{ modelValue.address }}附近，点击列表进行选择。</h5
      >
      <iframe width="100%" height="100%" frameborder="0" :src="mapUrl"></iframe>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMessage } from '@/hooks/web/useMessage'
import { useAppStore } from '@/store/modules/app'

const message = useMessage()
const appStore = useAppStore()

// 组件属性
const props = defineProps<{
  modelValue: {
    type: () => {
      lat?: number | string
      lng?: number | string
    }
    default: () => {}
  }
}>()

// 组件事件
const emit = defineEmits<{
  (e: 'update:modelValue', value: { lat?: number | string; lng?: number | string }): void
  (e: 'select', value: { lat: number | string; lng: number | string }): void
}>()

// 地图相关变量
const mapDialogVisible = ref(false)
const mapUrl = ref('')

// 打开地图弹窗
const openMap = (key: string) => {
  // 获取腾讯地图密钥并初始化地图URL
  if (!key) {
    message.error('腾讯位置服务的 key 未配置，请联系管理员！')
    return
  }
  const appTitle = appStore.title || 'myapp'
  // 设置默认坐标
  let coord = '39.998766,116.273938' // 默认北京坐标
  if (props.modelValue.lat && props.modelValue.lng) {
    coord = `${props.modelValue.lat},${props.modelValue.lng}`
  }
  // 构建腾讯地图选点组件URL
  mapUrl.value = `https://apis.map.qq.com/tools/locpicker?key=${key}&referer=${appTitle}&type=1&search=1&policy=1&mapdraggable=1&zoom=18&coordtype=5&coord=${coord}`
  // 显示地图弹窗
  mapDialogVisible.value = true
  // 初始化地图监听
  initMapListener()
}

// 初始化地图监听器
const initMapListener = () => {
  // 移除旧的监听器避免重复绑定
  window.removeEventListener('message', handleMapMessage)
  // 添加新的监听器
  window.addEventListener('message', handleMapMessage)
}

// 处理地图消息
const handleMapMessage = (event: MessageEvent) => {
  console.log('位置坐标选择器收到消息：', event.data)
  const loc = event.data
  if (loc && loc.module === 'locationPicker') {
    handleSelectAddress(loc.latlng)
  }
}

// 处理地址选择
const handleSelectAddress = (loc: any) => {
  console.log('选择的地理位置：', loc)
  if (!loc) {
    return
  }
  const location = {
    lat: loc.lat,
    lng: loc.lng
  }
  // 更新组件值
  emit('update:modelValue', location)
  emit('select', location)
  // 关闭地图弹窗
  mapDialogVisible.value = false
}

defineExpose({
  openMap
})
</script>

<style scoped>
.map-container {
  height: 100%;
  width: 100%;
}
</style>
